<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
      <span class="title">基本信息</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>客户公司：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.company_name}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>创建者：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.create_name}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>所属部门：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.dept_name ? desc_info.dept_name : '未知' }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>创建时间：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目名称：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.project_name}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>职能：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.function | jobFilter}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>优先级：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{ desc_info.project_priority | projectPriorityFilter }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>行业：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.industry | industryFilter}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目状态：</div></el-col>
        <el-col :span="8">
          <div  class='content'>
            <el-tag>{{ desc_info.project_status | projectStatusFilter }}</el-tag>
          </div>
        </el-col>
      </el-row>
      <hr style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>城市：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.city | cityValFilter }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>需求量：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.recruitment_num}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>汇报对象：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.leader ? desc_info.leader : '未知' }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>下属人数：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.subordinates_num ? desc_info.leader : '未知' }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>是否全日制：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ (desc_info.is_unified && desc_info.is_unified === '1') ? '是' : '否' }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>性别要求：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{ desc_info.sex | genderFilter }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>语言技能：</div></el-col>
        <el-col :span="8">
          <div  class='content'>
            <div v-if="language_level_group" class='content'>
              <span v-for="(item, index) in language_level_group" :key="item" >
                {{ item | languageLevelFilter }}<span v-if="(index+1) !== language_level_group.length">,</span>
              </span> 
            </div>
          </div>
        </el-col>
        <el-col :span="4"><div class='label'>学历要求：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{ desc_info.academic_qualification }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>专业要求：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{ desc_info.special_detail ? desc_info.special_detail : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>税前：</div></el-col>
        <el-col :span="8">
          <div v-if="desc_info.min_annual_salary && desc_info.max_annual_salary" class='content'>{{ desc_info.min_annual_salary }}-{{ desc_info.max_annual_salary }}</div>
          <div v-else-if="desc_info.min_annual_salary" class='content'>下限{{ desc_info.min_annual_salary }}</div>
          <div v-else-if="desc_info.max_annual_salary" class='content'>上限{{ desc_info.max_annual_salary }}</div>
          <div v-else class='content'>未知</div>
        </el-col>
        <el-col :span="4"><div class='label'>薪资构成：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ desc_info.salary_detail ? desc_info.salary_detail : '未知' }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>工作年限：</div></el-col>
        <el-col :span="8">
          <div v-if="desc_info.min_age && desc_info.max_age" class='content'>{{ desc_info.min_age }}-{{ desc_info.max_age }}</div>
          <div v-else-if="desc_info.min_age" class='content'>下限{{ desc_info.min_age }}</div>
          <div v-else-if="desc_info.max_age" class='content'>上限{{ desc_info.max_age }}</div>
          <div v-else class='content'>不限</div>
        </el-col>
        <el-col :span="4"><div class='label'>年龄：</div></el-col>
        <el-col :span="8">
          <div v-if="desc_info.min_year && desc_info.max_year" class='content'>{{ desc_info.min_year }}-{{ desc_info.max_year }}</div>
          <div v-else-if="desc_info.min_year" class='content'>下限{{ desc_info.min_year }}</div>
          <div v-else-if="desc_info.max_year" class='content'>上限{{ desc_info.max_year }}</div>
          <div v-else class='content'>不限</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>招聘原因：</div></el-col>
        <el-col :span="20">
          <div class='content'>{{ desc_info.recruit_reason }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">寻访方向</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="2"><div class='label'></div></el-col>
        <el-col :span="22"><div class='content'>{{ desc_info.search_direction ? desc_info.search_direction : '未填'  }}</div></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">职位描述</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="2"><div class='label'></div></el-col>
        <el-col :span="22"><div class='content'>{{ desc_info.jd_detail ? desc_info.jd_detail : '未填'  }}</div></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">项目组主要成员</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="2"><div class='label'>BD：</div></el-col>
        <el-col :span="6"><div class='content'>{{ (desc_info.company && desc_info.company.bd && desc_info.company.bd.username ) ? desc_info.company.bd.username : ''  }}</div></el-col>
        <el-col :span="2"><div class='label'>客户经理：</div></el-col>
        <el-col :span="6"><div class='content'>{{ getUsernameById (desc_info.client_manager )  }}</div></el-col>
        <el-col :span="2"><div class='label'>主要顾问：</div></el-col>
        <el-col :span="6"><div class='content'>{{ getUsernameById (desc_info.manager_consultant) }}</div></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">顾问</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="2"><div class='label'></div></el-col>
        <el-col :span="22">
          <div v-if="desc_info.consultant_group" class='content'>
            <span v-for="item in desc_info.consultant_group" :key="item.id" >
              {{getUsernameById (item.user_id)}}&nbsp;&nbsp;
            </span> 
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import API from '@/utils/backend_api'

export default {
  name: 'projectBase',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    }
  },
  data() {
    return {
      allUserOptions: this.$store.getters.usersList.map(item => ({ value: item.id, label: item.username + '(' + item.uid + ')', username: item.username })),
      desc_info: {},
      language_level_group: []
    }
  },
  filters: {
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.id && this.id !== '') {
        API.project.get(this.id).then(response => {
          this.desc_info = response.data
          if (this.desc_info.language_level_group) {
            this.language_level_group = JSON.parse(this.desc_info.language_level_group)
          }
        })
      }
    }
  },
  created() {
    if (this.id && this.id !== '') {
      API.project.get(this.id).then(response => {
        this.desc_info = response.data
        if (this.desc_info.language_level_group) {
          this.language_level_group = JSON.parse(this.desc_info.language_level_group)
        }
      })
    }
  },
  methods: {
    getUsernameById(id) {
      let username = ''
      if (id && id !== '') {
        this.allUserOptions.map(item => {
          if (item.value === id) {
            username = item.username
          }
        })
      }
      return username
    }
  }
}
</script>
<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-col {
    margin: 2px 0 4px;
  }
  .el-card{
    margin: 2px 0 4px;
  }

  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }

</style>
